<template>
	<view class="my-page">
		<u-navbar leftIconColor="#000000" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				邀请好友
			</view>
		</u-navbar>
		<view class="content">
			<view class="invite-box">
				<image src="../../../static/home/invite-bg.png" mode="widthFix"></image>
			</view>
			<view class="code">
				{{code}}
			</view>
			<view class="btn">
				<u-button style="box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);" customStyle="color:#000000;"
					@click="cory(imgurl)" color="#ffffff" shape="circle" type="primary" text="复制邀请链接"></u-button>
				<u-button style="margin-left: 20rpx; box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.03);"
					customStyle="color:#EC282C;" @click="cory(code)" color="#ffffff" shape="circle" type="primary"
					text="复制邀请码"></u-button>
			</view>

			<view class="code-img">
				<image :src="img"  ref="qrcodeImage" mode=""></image>
				<canvas canvas-id="myCanvas"
					style="position:fixed;left:-9999px;width:300px;height:300px;opacity: 0;"></canvas>
			</view>
			<view class="end-btn" @click="saveImage">保存图片</view>
		</view>
	</view>
</template>

<script>
	import QR from "@/codes/utils/wxqrcode.js" // 二维码生成器  
	export default {
		data() {
			return {
				img: '',
				code: '',
				info: {},
				imgurl: '',
				imageSize: { width: 0, height: 0 }
			}
		},
		onShow() {
			this.postinfo()
			this.postuserinfo()
		},
		methods: {
			// 修复后的H5保存图片方法
			async saveImage() {
				// #ifdef H5
				if (!this.img) {
					uni.showToast({
						title: '图片未准备好',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '正在生成图片...',
					mask: true
				});
				try {
					// 创建新的Image对象
					const img = new Image();
					img.crossOrigin = 'Anonymous';
					img.src = this.img;

					// 等待图片加载
					await new Promise((resolve, reject) => {
						img.onload = resolve;
						img.onerror = reject;
					});

					// 创建canvas
					const canvas = document.createElement('canvas');
					const ctx = canvas.getContext('2d');

					// 设置canvas尺寸为图片实际尺寸
					canvas.width = this.imageSize.width || img.naturalWidth;
					canvas.height = this.imageSize.height || img.naturalHeight;

					// 绘制图片到canvas
					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

					// 转换为数据URL
					const dataURL = canvas.toDataURL('image/png');

					// 创建下载链接
					const link = document.createElement('a');
					link.href = dataURL;
					link.download = '邀请二维码.png';

					// 触发下载
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);

					uni.hideLoading();
					uni.showToast({
						title: '图片已下载',
						icon: 'none'
					});
				} catch (error) {
					console.error('保存图片失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '保存图片失败: ' + error.message,
						icon: 'none'
					});
				}
				// #endif

				// #ifndef H5
				uni.showToast({
					title: '请在浏览器中使用此功能',
					icon: 'none'
				});
				// #endif
			},
			cory(info) {
				let app = this
				uni.setClipboardData({
					data: info,
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功！',
							icon: 'none'
						})
					}
				});
			},
			postuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/personal/myIndex',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data.user
					}
				})

			},
			postinfo() {
				uni.showLoading({
					mask: true
				})
				this.$Request({
					method: 'POST',
					url: '/api/share/shareImg',
					data: {},
					ismsg: false,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.code = res.data.guid
						this.imgurl = res.data.img_url
						this.img = QR.createQrCodeImg(
							res.data.img_url, {
								size: parseInt(200),
								typeNumber: 7
							})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-page {
		min-height: 100vh;
		padding: 30rpx;
		background-image: url('../../../static/home/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 500rpx;

		.end-btn {
			/* 尺寸 & 布局 */
			width: 90%;
			/* 补充单位 */
			margin: 0 auto;
			height: 96rpx;
			/* 48px → 96rpx (基于750rpx设计稿) */
			display: flex;
			/* 启用flex布局 */
			align-items: center;
			/* 垂直居中 */
			justify-content: center;
			/* 水平居中 */
			margin-top: 30rpx;
			/* 视觉样式 */
			border-radius: 104rpx;
			/* 52px → 104rpx */
			padding: 31.28rpx 40rpx;
			/* 合并padding (15.64px→31.28rpx, 20px→40rpx) */
			background: linear-gradient(180deg, #090B08 38.53%, #561F1F 152.08%);
			/* 合并渐变 */
			color: #fff;
			font-weight: 900;
			/* 优化阴影 (合并+简化) */
			box-shadow:
				-2rpx -2rpx 2rpx rgba(0, 0, 0, 0.23) inset,
				2rpx 2rpx 6rpx rgba(255, 255, 255, 0.6) inset,
				0 6rpx 12rpx rgba(28, 30, 49, 0.29),
				0 22rpx 22rpx rgba(28, 30, 49, 0.25),
				0 24rpx 28rpx rgba(28, 30, 49, 0.21);


		}

		.nav-title {
			color: #000000;
		}

		.content {
			width: 90%;
			padding: 30rpx 30rpx 50rpx 30rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 29.83%);
			border: 1px solid #FFFFFF;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);
			border-radius: 30rpx;
			position: relative;
			text-align: center;
			margin: 0 auto;
			margin-top: 400rpx;

			.code {
				font-size: 48rpx;
				font-weight: bold;
				color: #000;
			}

			.invite-box {
				position: absolute;
				z-index: -1;
				left: 0;
				right: 0;
				margin: auto;
				top: -400rpx;
			}



			.code-img {
				width: 290rpx;
				height: 290rpx;
				border: 15rpx solid rgba(0, 0, 0, 0.06);
				border-radius: 20rpx;
				padding: 15rpx;
				margin: 0 auto;
				margin-top: 60rpx;

				image {
					width: 230rpx;
					height: 230rpx;
				}
			}

			.btn {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
			}
		}
	}
</style>